import { useParams } from "react-router-dom";
import { Page, Card, SkeletonBodyText } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { useQuery } from "react-query";
import { GroupEditor } from "../../components";

export default function EditGroupPage() {
  const { id } = useParams();
  const { data, isLoading } = useQuery({
    queryKey: ["group", id],
    queryFn: async () => (await fetch(`/api/groups/${id}`)).json(),
    refetchOnWindowFocus: false,
  });

  return (
    <Page>
      <TitleBar
        title="Edit product group"
        breadcrumbs={[{ content: "Product groups", url: "/groups" }]}
      />
      {isLoading ? (
        <Card sectioned>
          <SkeletonBodyText lines={8} />
        </Card>
      ) : (
        <GroupEditor existing={data?.group} />
      )}
    </Page>
  );
}